:host{
  display: contents;
  --s: .5;
  --pad: 12px;
}

.pop {
  position: absolute;
  display: flex;
  flex-direction: column;
  overflow: visible;
  visibility: hidden;
  inset: auto;
  border: 0;
  opacity: .5;
  /* transition: opacity .05s, visibility .05s, transform 0s .1s; */
  transform: translate(var(--x), var(--y)) scale(var(--s));
  z-index: 10;
}

:host(:is([show],[open])) .pop{
  transition: var(--transition, .2s);
  --s: 1;
  opacity: 1;
  visibility: visible;
}
/* 
:host(:is(:not([trigger]),[trigger*='hover'])) .pop{
  transition: left 0s, top 0s, opacity .05s, visibility .05s, transform .2s;
} */

.pop::after{
  content: '';
  position: absolute;
  inset: calc(var(--pad) * -1);
  z-index: -1;
}

/* dir */
:host([dir=top]) .pop{
  transform-origin: bottom;
  left: calc((var(--left) + var(--right) ) * .5px + var(--offset-x, 0) * 1px);
  top: calc(var(--top) * 1px);
  --x: -50%;
  --y: -100%;
}

:host([dir=top]) .pop::before{
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 50%) scaleY(-1);
}

:host([dir=top]:is([show],[open])) .pop{
  --y: calc(-100% - var(--pad));
}

:host([dir=TL]) .pop{
  transform-origin: left bottom;
  left: calc( var(--left) * 1px);
  top: calc(var(--top) * 1px);
  --x: 0%;
  --y: -100%;
}

:host([dir=TL]) .pop::before{
  left: 8px;
  bottom: 0;
  transform: translate(0%, 50%) scaleY(-1);
}

:host([dir=TL]:is([show],[open])) .pop{
  --y: calc(-100% - var(--pad));
}

:host([dir=TR]) .pop{
  transform-origin: right bottom;
  left: calc( var(--right) * 1px);
  top: calc(var(--top) * 1px);
  --x: -100%;
  --y: -100%;
}

:host([dir=TR]) .pop::before{
  right: 8px;
  bottom: 0;
  transform: translate(0%, 50%) scaleY(-1);
}

:host([dir=TR]:is([show],[open])) .pop{
  --y: calc(-100% - var(--pad));
}

:host([dir=LT]) .pop{
  transform-origin: right top;
  left: calc( var(--left) * 1px);
  top: calc(var(--top) * 1px);
  --x: -100%;
  --y: 0%;
}

:host([dir=LT]) .pop::before{
  right: 0;
  top: 8px;
  transform: translate(50%, 0%) rotate(90deg);
}

:host([dir=LT]:is([show],[open])) .pop{
  --x: calc(-100% - var(--pad));
}

:host([dir=left]) .pop{
  transform-origin: right;
  left: calc( var(--left) * 1px);
  top: calc((var(--top) + var(--bottom) ) * .5px + var(--offset-y, 0) * 1px);
  --x: -100%;
  --y: -50%;
}

:host([dir=left]) .pop::before{
  right: 0;
  top: 50%;
  transform: translate(50%, -50%) rotate(90deg);
}

:host([dir=left]:is([show],[open])) .pop{
  --x: calc(-100% - var(--pad));
}

:host([dir=LB]) .pop{
  transform-origin: right top;
  left: calc( var(--left) * 1px);
  top: calc(var(--bottom) * 1px);
  --x: -100%;
  --y: -100%;
}

:host([dir=LB]) .pop::before{
  right: 0;
  bottom: 8px;
  transform: translate(50%, 0%) rotate(90deg);
}

:host([dir=LB]:is([show],[open])) .pop{
  --x: calc(-100% - var(--pad));
}

:host([dir=RT]) .pop{
  transform-origin: left top;
  left: calc( var(--right) * 1px);
  top: calc(var(--top) * 1px);
  --x: 0%;
  --y: 0%;
}

:host([dir=RT]) .pop::before{
  left: 0;
  top: 8px;
  transform: translate(-50%, 0%) rotate(-90deg);
}

:host([dir=RT]:is([show],[open])) .pop{
  --x: var(--pad);
}

:host([dir=right]) .pop{
  transform-origin: left;
  left: calc( var(--right) * 1px);
  top: calc((var(--top) + var(--bottom) ) * .5px + var(--offset-y, 0) * 1px);
  --x: 0%;
  --y: -50%;
}

:host([dir=right]) .pop::before{
  left: 0;
  top: 50%;
  transform: translate(-50%, -50%) rotate(-90deg);
}

:host([dir=right]:is([show],[open])) .pop{
  --x: var(--pad);
}

:host([dir=RB]) .pop{
  transform-origin: left bottom;
  left: calc( var(--right) * 1px);
  top: calc(var(--bottom) * 1px);
  --x: 0%;
  --y: -100%;
}

:host([dir=RB]) .pop::before{
  left: 0;
  bottom: 8px;
  transform: translate(-50%, 0%) rotate(-90deg);
}

:host([dir=RB]:is([show],[open])) .pop{
  --x: var(--pad);
}

:host([dir=bottom]) .pop{
  transform-origin: top;
  left: calc((var(--left) + var(--right) ) * .5px + var(--offset-x, 0) * 1px);
  top: calc(var(--bottom) * 1px);
  --x: -50%;
  --y: 0%;
}

:host([dir=bottom]) .pop::before{
  left: 50%;
  top: 0;
  transform: translate(-50%, -50%);
}

:host([dir=bottom]:is([show],[open])) .pop{
  --y: var(--pad);
}

:host([dir=BL]) .pop{
  transform-origin: left top;
  left: calc(var(--left) * 1px);
  top: calc(var(--bottom) * 1px);
  --x: 0%;
  --y: 0%;
}

:host([dir=BL]) .pop::before{
  left: 8px;
  top: 0;
  transform: translate(0%, -50%);
}

:host([dir=BL]:is([show],[open])) .pop{
  --y: var(--pad);
}

:host([dir=BR]) .pop{
  transform-origin: right top;
  left: calc(var(--right) * 1px);
  top: calc(var(--bottom) * 1px);
  --x: -100%;
  --y: 0%;
}

:host([dir=BR]) .pop::before{
  right: 8px;
  top: 0;
  transform: translate(0%, -50%);
}

:host([dir=BR]:is([show],[open])) .pop{
  --y: var(--pad);
}